
import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'umi'
import {
  MessageOutlined,
} from '@ant-design/icons';
import { Pagination, message, Popconfirm, Button } from 'antd';
import { emojis } from '@/utils/emojis'
import { CommendModelState } from '@/models/commend';
import { formatDate } from '@/utils/index'
import styles from './index.less'

export interface ICommonCommendType {
  id?: string;
}

interface emojisType {
  [propsName: string]: string
}


const CommonCommend: React.FC<ICommonCommendType> = (props) => {
  
  // Hook 分发 action 方法
  const dispatch = useDispatch();

  // // 获取state 数据

  const { commendList, commendLength } = useSelector((state: { commend: CommendModelState }) => state.commend)
  
  //  // 请求页面数据    
  useEffect(() => {
    //  评论的数据      
    dispatch({
      type: 'commend/getArticleCommend',
      payload: { id:props.id }
    })
  }, [props.id])

  //   类似受控组件
  const [con, editCon] = useState('')
  function editConEvent(e: React.ChangeEvent) {
    editCon((e.target as HTMLInputElement).value)
  }


  function rgb(){//rgb颜色随机
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);
    var rgb = '('+r+','+g+','+b+')';
    return rgb;
  }
  function color16(){//十六进制颜色随机
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);
    var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
    return color;
  }


  

  // 提交评论    
  function commitEvent() {
    console.log(con);

    const payload = {
      email: '23434353454@qq.com',
      hostId: props.id,
      name: "ewrew",
      url: "/page/about",
      content: con
    }
    
    if (con) {
      dispatch({
        type: 'commend/AddArticleCommend',
        payload
      })
      message.success('评论成功');
      editCon('');
    } else {
      message.success('评论失败');
    }
  }

  const [con1, edition1] = useState('')
  function editPublish1(e: React.ChangeEvent) {
    edition1((e.target as HTMLInputElement).value)
  }

  const [con2, edition2] = useState('')
  function editPublish2(e: React.ChangeEvent) {
    edition2((e.target as HTMLInputElement).value)
  }

  // 回复 评论提交
  function publish1(param: any) {
        
    const {
      parentCommentId,
      replyUserEmail,
      replyUserName,
      url,id } = param;

    const data = {
      content: con1,
      email: '23434353454@qq.com',
      hostId: props.id,
      name: "ewrew",
      replyUserEmail,
      replyUserName,
      url
    }
    console.log('data1...',data);


    dispatch({
      type: 'commend/AddArticleCommend',
      payload: data
    })
    if (con1) {
      dispatch({
        type: 'commend/AddArticleCommend',
        payload: data
      })
      message.success('评论成功');
      edition1('');
      showSet(!show)
    } else {
      message.success('评论失败');
    }   
  }


  function publish2(param: any) {
    const {
      parentCommentId,
      replyUserEmail,
      replyUserName,
      url,id } = param;

    const data = {
      content: con2,
      email: '23434353454@qq.com',
      hostId: props.id,
      name: "ewrew",
      parentCommentId:id,
      replyUserEmail,
      replyUserName,
      url,
    }
    console.log('data2...',data);
    
    if (con2) {
      dispatch({
        type: 'commend/AddArticleCommend',
        payload: data
      })
      message.success('评论成功');
      edition2('');
      showSet(!show)
    } else {
      message.success('评论失败');
      showSet(!show)
    }   
  }

  // 获取评论的所有数据 并截取 单页显示数据  在页面做分割  老师的做法是在后端获取分割
  // const CommondData = commendList.slice((start - 1) * 6, (start) * 6); 

  // 点击回复显示评论框
  const [show, showSet] = useState(false);
  const [key, keySet] = useState('');
  function handleClick(param: string) {
    showSet(!show)
    keySet(param);
  }

  // 点击收回
  function takeBack() {
    showSet(!show);
  }

  // 表情
  const [flag, setFlag] = useState(false);
  const [kid, setKid] = useState('');
  function emojisflag(id:string='') {
    setFlag(!flag);
    setKid(id)
  }

  const arry: any = [];
  let object: any = emojis;

  Object.keys(object).forEach(function (key: string) {
    arry.push(object[key]);
  })


  function addemojis(lis: string) {
    editCon((con) => {
      return con + lis
    });
   
  }


  function addemojis1(lis: string) {
    edition1((con1) => {
      return con1 + lis
    });
   
  }

  function addemojis2(lis: string) {
    edition2((con2) => {
      return con2 + lis
    });
   
  }


  // 分页  
  const [start, changeStart] = useState(1);
  useEffect(()=>{
    changeStart(1);    
  },[])

  function onChange(page: number, pageSize: number) {
    // 解决高亮的问题
    
    dispatch({
      type: 'commend/getArticleCommend',
      payload: {
        id:props.id, page
      }
    })
    changeStart(page);
  }


  return <div className={styles.commend}>
    {/* 中部盒子 */}
    <div className={styles.middle} >
      {/* 评论模块 */}
      <div className={styles.comment}>

        <div className={styles.comment_top}>
          <p>评论</p>
        </div>

        {/* 评论框 */}
        <div className={styles.comment_bottom}>
          <div className={styles.icnext}>
            <textarea name="" placeholder='请输入评论内容&emsp;(支持markdown)' value={con}
              onChange={(e) => editConEvent(e)}
            ></textarea>
            <div className={styles.btns}>
              {/*--------------------------------------------------*/}
              <div className={styles.emo}>
                <span onClick={()=>emojisflag('')}>
                  <svg viewBox="0 0 1024 1024" width="18px" height="18px"><path d="M288.92672 400.45568c0 30.80192 24.97024 55.77216 55.77216 55.77216s55.77216-24.97024 55.77216-55.77216c0-30.7968-24.97024-55.76704-55.77216-55.76704s-55.77216 24.97024-55.77216 55.76704z m334.60224 0c0 30.80192 24.97024 55.77216 55.77216 55.77216s55.77216-24.97024 55.77216-55.77216c0-30.7968-24.97024-55.76704-55.77216-55.76704s-55.77216 24.97024-55.77216 55.76704z m-111.5392 362.4704c-78.05952 0-156.13952-39.08096-200.75008-100.3776-16.77312-22.31296-27.84256-50.15552-39.08096-72.45824-5.53472-16.77312 5.5296-33.4592 16.77312-39.08096 16.77312-5.53472 27.84256 5.53472 33.46432 16.768 5.53472 22.30784 16.77312 39.08608 27.84256 55.77728 44.61568 55.76704 100.38272 83.69664 161.664 83.69664 61.30176 0 122.7008-27.84256 156.16-78.07488 11.15136-16.77824 22.30784-38.99904 27.84256-55.77728 5.62176-16.768 22.30784-22.30272 33.4592-16.768 16.768 5.53472 22.30784 22.30272 16.768 33.4592-5.61152 27.84256-22.2976 50.14528-39.08096 72.45824-38.912 61.37856-116.98176 100.3776-195.06176 100.3776z m0 194.51392C268.4928 957.44 66.56 755.52256 66.56 511.99488 66.56 268.48256 268.4928 66.56 511.98976 66.56 755.50208 66.56 957.44 268.48256 957.44 511.99488 957.44 755.52256 755.50208 957.44 511.98976 957.44z m0-831.45728c-213.78048 0-386.00192 172.21632-386.00192 386.01216 0 213.8112 172.22144 386.0224 386.00192 386.0224 213.80096 0 386.0224-172.2112 386.0224-386.0224 0-213.79584-172.22144-386.01216-386.0224-386.01216z" fill="currentColor"></path></svg>
                  表情</span>
                {flag && kid==='' && <ul className={styles.demobox}>
                  {
                    arry.map((item: string) => {
                      return <li onClick={() => addemojis(item)}>{item}</li>
                    })
                  }
                </ul>}
              </div>

              <button onClick={() => commitEvent()}>发布</button>
            </div>
          </div>

        </div>

        {/* 评论列表 */}
        <div className={styles.comment_footer}>
          <div className={styles.comment_list}>            
            {
              commendList.map((item, index) => {
                if (item.pass) {
                  return <div
                    className={styles.list_box}
                    key={index}
                  >
                    <p style={{ fontSize: '15px' }}>
                      <span className={styles.avatar_big} style={{background:color16()}}>{item.name.slice(0, 1)}</span>
                      <span style={{ fontSize: '15px' }}>{item.name}</span></p>
                    <p style={{ fontSize: '20px', marginLeft: '50px' }}>
                      {item.content}</p>
                    <p
                      style={{ fontSize: '20px', marginLeft: '50px', color: '#999' }}
                    >
                      <span>{item.userAgent}</span><span>{formatDate(item.updateAt)}</span>
                      <span
                        onClick={() => handleClick(item.id)}
                        className={styles.on}>&nbsp; <MessageOutlined />&nbsp;回复</span></p>

                    {/* 回复 */}
                    {show && item.id === key && <div className={styles.answer}>
                      <textarea id={styles.text}
                        value={con1}
                        onChange={(e) => editPublish1(e)}
                      ></textarea>

                      <div>

                        <div className={styles.btns1}>
                          <div className={styles.emo}>
                            <span onClick={()=>emojisflag(item.id)}>
                              <svg viewBox="0 0 1024 1024" width="18px" height="18px"><path d="M288.92672 400.45568c0 30.80192 24.97024 55.77216 55.77216 55.77216s55.77216-24.97024 55.77216-55.77216c0-30.7968-24.97024-55.76704-55.77216-55.76704s-55.77216 24.97024-55.77216 55.76704z m334.60224 0c0 30.80192 24.97024 55.77216 55.77216 55.77216s55.77216-24.97024 55.77216-55.77216c0-30.7968-24.97024-55.76704-55.77216-55.76704s-55.77216 24.97024-55.77216 55.76704z m-111.5392 362.4704c-78.05952 0-156.13952-39.08096-200.75008-100.3776-16.77312-22.31296-27.84256-50.15552-39.08096-72.45824-5.53472-16.77312 5.5296-33.4592 16.77312-39.08096 16.77312-5.53472 27.84256 5.53472 33.46432 16.768 5.53472 22.30784 16.77312 39.08608 27.84256 55.77728 44.61568 55.76704 100.38272 83.69664 161.664 83.69664 61.30176 0 122.7008-27.84256 156.16-78.07488 11.15136-16.77824 22.30784-38.99904 27.84256-55.77728 5.62176-16.768 22.30784-22.30272 33.4592-16.768 16.768 5.53472 22.30784 22.30272 16.768 33.4592-5.61152 27.84256-22.2976 50.14528-39.08096 72.45824-38.912 61.37856-116.98176 100.3776-195.06176 100.3776z m0 194.51392C268.4928 957.44 66.56 755.52256 66.56 511.99488 66.56 268.48256 268.4928 66.56 511.98976 66.56 755.50208 66.56 957.44 268.48256 957.44 511.99488 957.44 755.52256 755.50208 957.44 511.98976 957.44z m0-831.45728c-213.78048 0-386.00192 172.21632-386.00192 386.01216 0 213.8112 172.22144 386.0224 386.00192 386.0224 213.80096 0 386.0224-172.2112 386.0224-386.0224 0-213.79584-172.22144-386.01216-386.0224-386.01216z" fill="currentColor"></path></svg>
                              表情</span>
                            {flag && kid===item.id && <ul className={styles.demobox}>
                              {
                                arry.map((item: string) => {
                                  return <li onClick={() => addemojis1(item)}>{item}</li>
                                })
                              }
                            </ul> }
                          </div>
                        </div>


                        <p><button onClick={takeBack}>收起</button> <button onClick={() => publish1(item)}

                        >发布</button></p>
                      </div>
                    </div>}
                    <div className={styles.chidlren}>
                      {
                        item.children && item.children.map((ite:any, ind:number) => {
                          if (ite.pass) {
                            return <div key={ind}
                              className={styles.insert}
                            >
                              <p>  <span className={styles.avatar_small} style={{background:color16()}} >{ite.name.slice(0, 1)}</span>

                                <span
                                  style={{ fontSize: '18px', marginRight: '10px', fontWeight: 'bold' }}>{ite.name}</span>回复<span style={{ fontSize: '18px', marginLeft: '10px', fontWeight: 'bold' }}>{item.name}</span></p>

                              <p style={{ fontSize: '20px' }}>{ite.content}</p>
                              <p style={{ fontSize: '20px', color: '#999' }}><span>{ite.userAgent}</span><span>{formatDate(ite.updateAt)}</span>

                                <span
                                  onClick={() => handleClick(ite.id)}
                                  className={styles.on}>&nbsp; <MessageOutlined />&nbsp;回复</span></p>

                              {/* 回复 */}
                              {show && ite.id === key && <div className={styles.answer2}>
                                <textarea id={styles.text} onChange={
                                  (e) => editPublish2(e)
                                } value={con2}></textarea>

                                {/*--------------------------------------------------*/}
                                <div>
                                  <div className={styles.btns2}>
                                    {/*--------------------------------------------------*/}
                                    <div className={styles.emo}>
                                      <span onClick={()=>emojisflag(ite.id)}>
                                        <svg viewBox="0 0 1024 1024" width="18px" height="18px"><path d="M288.92672 400.45568c0 30.80192 24.97024 55.77216 55.77216 55.77216s55.77216-24.97024 55.77216-55.77216c0-30.7968-24.97024-55.76704-55.77216-55.76704s-55.77216 24.97024-55.77216 55.76704z m334.60224 0c0 30.80192 24.97024 55.77216 55.77216 55.77216s55.77216-24.97024 55.77216-55.77216c0-30.7968-24.97024-55.76704-55.77216-55.76704s-55.77216 24.97024-55.77216 55.76704z m-111.5392 362.4704c-78.05952 0-156.13952-39.08096-200.75008-100.3776-16.77312-22.31296-27.84256-50.15552-39.08096-72.45824-5.53472-16.77312 5.5296-33.4592 16.77312-39.08096 16.77312-5.53472 27.84256 5.53472 33.46432 16.768 5.53472 22.30784 16.77312 39.08608 27.84256 55.77728 44.61568 55.76704 100.38272 83.69664 161.664 83.69664 61.30176 0 122.7008-27.84256 156.16-78.07488 11.15136-16.77824 22.30784-38.99904 27.84256-55.77728 5.62176-16.768 22.30784-22.30272 33.4592-16.768 16.768 5.53472 22.30784 22.30272 16.768 33.4592-5.61152 27.84256-22.2976 50.14528-39.08096 72.45824-38.912 61.37856-116.98176 100.3776-195.06176 100.3776z m0 194.51392C268.4928 957.44 66.56 755.52256 66.56 511.99488 66.56 268.48256 268.4928 66.56 511.98976 66.56 755.50208 66.56 957.44 268.48256 957.44 511.99488 957.44 755.52256 755.50208 957.44 511.98976 957.44z m0-831.45728c-213.78048 0-386.00192 172.21632-386.00192 386.01216 0 213.8112 172.22144 386.0224 386.00192 386.0224 213.80096 0 386.0224-172.2112 386.0224-386.0224 0-213.79584-172.22144-386.01216-386.0224-386.01216z" fill="currentColor"></path></svg>
                                        表情</span>
                                      {flag && kid===ite.id && <ul className={styles.demobox}>
                                        {
                                          arry.map((item: string) => {
                                            return <li onClick={() => addemojis2(item)}>{item}</li>
                                          })
                                        }
                                      </ul>}
                                    </div>
                                  </div>
                                  <p><button onClick={takeBack}>收起</button> <button onClick={() => publish2(item)}
                                  >发布</button></p>
                                </div>
                              </div>}
                            </div>
                          }
                        })
                      }
                    </div>
                  </div>
                }

              })
            }
          </div>
          <div>

          </div>
          <div className={styles.pageClass}>
            <Pagination size="small" total={commendLength} defaultCurrent={start} style={{ marginLeft: '40%', lineHeight: '30px', paddingTop: '10px', marginTop: '20px' }} onChange={onChange} pageSize={6} />
          </div>
        </div>

      </div>
      {/* 推荐阅读 */}
      {/* <div className={styles.suggested}>
        <div className={styles.top}>
              <span>推荐阅读</span>
        </div>
        <div className="list">
            
        </div>
      </div> */}
    </div>
  </div>

}

export default CommonCommend;